<template>
  <div class="search">
    <Header></Header>
    <Searchbox class="searchbox"></Searchbox>
    <div class="main">
      <div class="text">
        <span>正在搜索：{{type}}-{{input}}</span>
      </div>
      <div class="list">
        <ul class="list-ul">
          <li class="list-li" v-for="(item, index) in goodsList" :key="index" @click="toItemDetail(item)">
            <div class="img-wrapper">
              <img :src="`http://localhost:8080/api/v1/images/${item.imageDir}/thumbnail.jpg`" alt="" />
            </div>
            <div class="li-text">{{ item.description }}</div>
            <span><span class="li-first">￥{{ item.price }}</span><span class="li-last">{{ item.name }}</span></span>
          </li>
        </ul>
      </div>
      <div>
        <ul>
          <li v-for="(item, index) in storesList" :key="index" style="padding:50px">
            <div style="font-size:20px;color:#f40">{{item.name}}</div>
            <div>{{item.description}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Searchbox from '@/components/Searchbox.vue'

export default {
  components: {
    Header,
    Searchbox
  },
  data () {
    return {
      input: '',
      type: '',
      goodsList: [],
      storesList: []
    }
  },
  mounted () {
    this.input = this.$route.params.input || this.$route.query.input
    this.type = this.$route.params.type || this.$route.query.type
    if (this.type === '宝贝') {
      this.$http.get('search/items', {
        params: {
          item_q: this.input
        }
      }).then((res) => {
        this.goodsList = res.data
      })
    } else if (this.type === '店铺') {
      this.$http.get('search/stores', {
        params: {
          store_q: this.input
        }
      }).then((res) => {
        this.storesList = res.data
      })
    }
  },
  methods: {
    toItemDetail (item) {
      this.$router.push({ path: '/ItemDetail', query: { item: item.itemId } })
    }
  }
}
</script>

<style lang="less" scoped>
.searchbox {
  margin: 20px 0 20px 600px;
  border: 1px solid #f40;
}
.main {
  width: 70%;
  height: 100px;
  margin: 0 auto;
  .list {
    border-top: 1px solid #f40;
      .list-ul {
        width: 100%;
        padding: 0;
        .list-li {
          list-style: none;
          width: 220px;
          height: 280px;
          margin: 10px;
          float: left;
          background-color: white;
          border-radius: 10px;
          text-align: center;
          overflow: hidden;
          &:hover {
            box-shadow: #666 0 0 10px;
          }
          .img-wrapper {
            width: 200px;
            height: 200px;
            margin: 6px auto;
            border-radius: 10px;
            overflow: hidden;
            img {
              object-fit: cover;
              width: 100%;
            }
          }
          .li-text {
            width: 80%;
            height: 38px;
            margin: 6px auto;
            overflow: hidden;
          }
          span {
            width: 80%;
            height: 26px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .li-first {
              font-size: 20px;
              font-weight: bold;
              color: tomato;
            }
            .li-last {
              height: 100%;
              font-size: 14px;
              line-height: 26px;
              color: #999;
            }
          }
        }
      }
  }
}
</style>
